<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
  <script src="./js/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>

  <script type="text/babel">
    let vDom
    let isLoading = false // 标识是否正在加载中
    /* 
    情况1: 满足条件显示界面1, 否则显示界面2
      if...else
      三元表达式
    情况2: 只有满足条件才显示界面, 否则不做显示
      &&
    */
   // if..else
   /* if (isLoading) {
    vDom = <h2>正在加载中...</h2>
   } else {
    vDom = <h2>加载完成</h2>
   } */

   // 三元表达式
  //  vDom = isLoading ? <h2>正在加载中2...</h2> : <h2>加载完成2</h2>

  // 只想显示加载完成的提示界面
  // 只想显示加载中的提示界面
  // 基本不用 || 来实现条件渲染
  vDom = !isLoading && <h2>正在加载中3...</h2>

  /* 
   &&和||两边的表达式都很可能不是boolean值
    表达式1 && 表达式2
      如果表达式1对应的boolean值是true, 结果就是表达式2的值
      如果表达式1对应的boolean值是false, 结果就表达式1的值
    表达式1 || 表达式2
      如果表达式1对应的boolean值是true, 结果直接就是表达式1的值
      如果表达式1对应的boolean值是false, 结果就表达式2的值
  */
  //  5 && 'abc' // ?
  //  0 && true // ?
  //  5 || 'abc' // ?
  //  0 || true // ?

    
    
     ReactDOM.render(vDom, document.getElementById('root'))
  </script>
</body>
</html>